﻿<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="/HR_SYSTEM/Styles/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="/HR_SYSTEM/Styles/admin-all.css" />
    <script type="text/javascript" src="/HR_SYSTEM/Scripts/jquery-1.7.2.js"></script>
    <script type="text/javascript" src="/HR_SYSTEM/Scripts/jquery-ui-1.8.22.custom.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/HR_SYSTEM/Styles/ui-lightness/jquery-ui-1.8.22.custom.css" />
    <script type="text/javascript" src="/HR_SYSTEM/Scripts/tip.js"></script>
    <script type="text/javascript">
    	function createXMLHttpRequest() {
		var xmlHttp;
		try {
			return xmlHttp = new XMLHttpRequest();
		} catch (e) {
			try {
				return xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
			} catch (e) {
				try {
					return xmlHttp = new ActiveXObject("Micrsoft.XMLHTTP");
				} catch (e) {
					alter("无法识别您的浏览器，将会失去异步传输功能");
					throw e;
				}
			}
		}
	}

	function validate() {
		if (event.keyCode != 13 && event.keyCode != 38 && event.keyCode != 40) {
			/*获取xmlHttp对象  */
			var xmlHttp = createXMLHttpRequest();
			/*连接哪一个Servlet */
			xmlHttp.open("POST", "<c:url value='/ValidateRoleName'/>", true);
			xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
			var role_Name = document.getElementById("rolename");
			xmlHttp.send("rolename=" + rolename.value);
			xmlHttp.onreadystatechange = function() {
				var message = document.getElementById("msg");
				if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
					var text = xmlHttp.responseText;
					if (text == "1") {
						message.innerHTML = "<font color='red'>角色已经被注册</font>";
					} else if (text == "2") {
						message.innerHTML = "<font color='blue'>请进行输入</font>";
					} else {
						message.innerHTML = "<font color='green'>角色名称可以被添加</font>";
					}
				}
			};
		}
	}
	    function addRole(){
    		document.forms["form_add"].submit();
    	}
	
    </script>
</head>
<body>
    <div></div>
    <div class="alert alert-info">当前位置<b class="tip"></b>管理界面<b class="tip"></b>添加角色</div>
    <form action="<c:url value='/RoleServlet'/>" name="form_add" method="post">
     <input type="hidden" name="method" value="addRole"/>
     <table class="table table-striped table-bordered table-condensed">
        <tr>
            <td>角色编号:</td>
            <td>自动生成</td>
        </tr>
        <tr>
            <td>角色名称:</td>
            <td>
            	<input name="rolename" id="rolename" type="text" onpropertychange="validate()"/>
            	&nbsp;&nbsp;&nbsp;&nbsp;
            	<span id="msg"></span>
            </td>
 		</tr>
 	</table>
 	<table class="table table-striped table-bordered table-condensed">
        <tr>
            <td>权限</td>
            <td>功能</td>
        </tr>
        <c:forEach items="${privileges}" var="privilege">
            <tr>
            	<td><input type="checkbox" name="privileges" value="${privilege.privilege_id}" >${privilege.privilege_name}</td>
            	<c:set var="prid" value="${privilege.privilege_id}"></c:set>
            	<td>
            		<c:forEach items="${privilege.functions}" var="function">
            			<input type="checkbox" name="functions" value="${function.function_id},${prid}">${function.function_name}
            		</c:forEach>
            	</td>
            </tr>
        </c:forEach>
    	 <tr>
            <td colspan="2">
                <input class="btn btn-inverse" id="button" type="button" onClick="addRole()" value="添加角色" />&nbsp;
                <input class="btn btn-inverse" type="reset" value="清空" />&nbsp;
            </td>
        </tr>
    </table>
    </form>
</body>
</html>
